<template>
  <div class="page" style="display: flex;align-items: center;justify-content: center;">
    <v-shell
      style="width: 600px;height: 400px;"
      :banner="banner"
      :shell_input="send_to_terminal"
      :commands="commands"
      @shell_output="prompt"
    ></v-shell>
  </div>
</template>

<script>
export default {
  data() {
    return {
      send_to_terminal: "",
      banner: {
        header: "Vue Shell",
        subHeader: "Shell is power just enjoy 🔥",
        helpHeader: 'Enter "help" for more information.',
        emoji: {
          first: "🔅",
          second: "🔆",
          time: 750
        },
        sign: "VueShell $",
        img: {
          align: "left",
          link: "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80",
          width: 100,
          height: 100
        }
      },
      commands: [
        { name: "info",
          get() {
            return `<p>With ❤️ By Salah Bentayeb @halasproject.</p>`;
          }
        },
        {
          name: "uname",
          get() {
            return navigator.appVersion;
          }
        }
      ]
    };
  },
  methods: {
    prompt(value) {
      if (value == "node -v") {
        this.send_to_terminal = process.versions.node;
      }
    }
  }
}
</script>

<style lang="scss">
.page {
  width: 100%;
  height: 100%;
  padding: 10px;
}
</style>
